<template>
	<view>
		<u-form style="background-color: #FFFFFF;padding: 20rpx;" :model="nowClub" ref="uForm">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="名称" prop="title">
				<view @tap="uploadTitleShow=true" style="height: 100%;width: 100%;">
					{{nowClub.clubname}}
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="logo" prop="title">
				<view @tap="uploadLogoShow=true" style="height: 100%;width: 100%;">
					<u-image shape="square" ref="uImage" :width="160" :height="160" :src="nowClub.logo"
						mode="aspectFill">
					</u-image>
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="简介" prop="title">
				<view @tap="uploadDetailShow=true" style="height: 100%;width: 100%;">
					{{nowClub.detail}}
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="高校" prop="title">
				<view style="height: 100%;width: 100%;">
					{{nowClub.university}}
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="会员" prop="title">
				<view style="height: 100%;width: 100%;">
					{{nowClub.member}}
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="活动" prop="title">
				<view style="height: 100%;width: 100%;">
					{{nowClub.movementNum}}
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="负责人" prop="title">
				<view style="height: 100%;width: 100%;">
					{{nowClub.mastername}}
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="成立时间" prop="title">
				<view style="height: 100%;width: 100%;">
					{{nowClub.createtime}}
				</view>
			</u-form-item>
		</u-form>
		<u-modal ref="uModalTitle" v-model="uploadTitleShow" :show-cancel-button="true" :show-title="false"
			@confirm="confirm">
			<view style="font-size: 36rpx;text-align: center;padding: 20rpx;">修改社团名称</view>
			<view style="margin: 20rpx;">
				<u-input :border="true" v-model="nowClub.clubname" type="text"></u-input>
			</view>
		</u-modal>
		<u-modal ref="uModalLogo" v-model="uploadLogoShow" :show-cancel-button="true" :show-title="false"
			@confirm="uploadLogo">
			<view style="font-size: 36rpx;text-align: center;padding: 20rpx;">修改Logo</view>
			<u-upload ref="uUpload" :custom-btn="false" :show-upload-list="true"
				:auto-upload="false" :show-progress="true" :deletable="true" :max-count="1"
				@on-list-change="onListChange">
			</u-upload>
		</u-modal>
		<u-modal ref="uModalDetail" v-model="uploadDetailShow" :show-cancel-button="true" :show-title="false">
			<view style="font-size: 36rpx;text-align: center;padding: 20rpx;">修改社团简介</view>
			<view style="margin: 20rpx;">
				<u-input :border="true" v-model="nowClub.detail" type="textarea"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props: ["nowUserClub"],
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				nowClub: {
					id: "", //社团ID
					clubname: "", //社团名称
					member: "", //会员数
					logo: "", //社团logo
					detail: "", //社团简介
					createtime: "", //成立时间
					university: "", //所属高校
					universityId: "", //高校ID
					movementNum: "", //已发布活动数量
					status: "", //社团状态 0审核中 1审核通过
					masterid: "", //社团负责人Id
					mastername: "", //社团负责人名字
					deleted: "", //逻辑删除			
				},
				uploadTitleShow: false,
				uploadDetailShow: false,
				uploadLogoShow: false,
				lists: [],
			}
		},
		created() {
			uni.request({
				url: this.url.club.info + "/" + this.nowUserClub.clubId,
				method: 'GET',
				header: {},
				success: (res) => {
					this.nowClub = res.data.club
					console.log(this.nowClub)
				},
				fail: (res) => {
					console.log("失败 -- 得到当前社团", res)
				}
			});

		},
		methods: {
			update() {
				uni.request({
					url: this.url.club.saveClub,
					method: 'POST',
					data: JSON.stringify(this.nowClub),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
					},
					fail: (res) => {
						console.log("失败！")
					}
				});
			},
			confirm() {
				uni.request({
					url: this.url.club.saveClub,
					method: 'POST',
					data: JSON.stringify(this.nowClub),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
					},
					fail: (res) => {
						console.log("失败！")
					}
				});
			},
			onListChange(lists) {
				this.lists = lists;
				console.log("进入集合")
				console.log(this.lists)
			},
			uploadLogo(){
				if(this.lists.length!=0){
					uni.uploadFile({
						url: this.url.file.upload, //仅为示例，非真实的接口地址
						method: 'POST',
						filePath: this.lists[0].url,
						name: 'file',
						success: (res) => {
							console.log(res)
							var data = JSON.parse(res.data);
							if(data.msg == "success"&& data.url!=null) {
								this.nowClub.logo = data.url
								console.log(this.nowClub)
								//新增
								this.confirm();
							}
						},
						fail: (res) => {
							console.log(res)
						}
					});
				}else{
					//修改
					this.saveMovement(that.updateActivity);
				}
			}
		}
	}
</script>

<style>
</style>
